<template>
    <div class="back">
        <div class="box_admin">
            <h3>新增管理员</h3>
            <div class="header">
                预览：
                <img :src="img" alt="" v-if="img!==''">
                <span v-else style="margin-right: 70px">待上传</span>
                <span class="upload_">
                     上传头像
                    <input type="file" id="file" @input="upload_($event)">
                </span>
            </div>
            <label>
                账号：<input type="text" v-model="admin.username">
            </label>
            <label>
                密码：<input type="text" v-model="admin.password">
            </label>
            <div class="choose">
                <button @click="insert">提交</button>
                <button style="background: #ee4f4f" @click="shutDown">取消</button>
            </div>
            <p class="tishi">温馨提示：请不要输入特殊字符！</p>
        </div>
    </div>
</template>

<script>
import api from "@/api";
export default {
    name: "AddAdministrator",
    data(){
        return{
            admin:{
                username:"",
                password:"",
            },
            img:'',
            file_:"",
        }
    },
    methods:{
        upload_(event){
            this.file_ = event.target.files[0];
            const URL = window.webkitURL || window.URL
            this.img = URL.createObjectURL(this.file_)
        },
        insert(){
            if(this.admin.password === "" || this.admin.username === "" || this.img ==='' ){
                this.$store.commit("requestInfo", "请检查所填项，不能留空!");
                return;
            }
            const format = new FormData();
            format.append('file',this.file_)
            format.append('username',this.admin.username)
            format.append('password',this.admin.password )
            api.insertAdmin(format).then((res)=>{
                if(res.data.code === 200){
                    this.$store.commit("requestInfo", "添加成功!");
                    this.$emit("shutDown")
                }else {
                    this.$store.commit("requestInfo", "添加失败!");
                }
            })
        },
        shutDown(){
            this.img = '';
            this.$emit("shutDown")
        }
    }
}
</script>

<style scoped>
.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(143, 140, 140, 0.1);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes box_admin {
    0%{
        transform: scale(0);
    }
    90%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1);
    }
}
.box_admin{
    position: relative;
    width: 330px;
    height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #8f8c8c;
    animation: box_admin .3s ease-in-out 0s 1 forwards;
}
h3{
    text-align: center;
    font-weight: bold;
    color: white;
    margin: 0 0 10px 0;
}
.choose{
   padding: 10px 0;
}
button{
    outline: none;
    border: 0;
    padding: 8px 20px;
    cursor: pointer;
    margin: 0 5px;
    color: white;
    transition: all .2s;
    background: #3586f1;
    border-radius: 2px;
}
button:hover{
    opacity: .8;
}
input{
    text-indent: 0.5rem;
    outline: none;
    border-radius: 3px;
    height: 30px;
    width: 200px;
    margin: 10px 0;

}
.tishi{
    position: absolute;
    bottom: 1%;
    left: 2%;
    color: white;
    font-size: 10px;
}
.header{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header img{
    margin-right: 60px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.upload_{
    position: relative;
    width: 80px;
    padding:2px 5px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 2px
}
#file{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    max-width: 100px;
    opacity: 0;
    margin: 0;
    cursor: pointer !important;
}
.upload_:hover{
    opacity: .8;
}
</style>